<template>
  <div class="allinfo"
       style="height:900px">
    <!-- 第一行 -->
    <div class="firstline">
      <span style="font-weight:bold;position: relative; margin-left:20px;top:15px">新增选货单</span>
      <div class="submitandcancel">
        <el-button type="primary"
                   @click="commit()"
                   icon="el-icon-s-promotion">提交</el-button>
        <el-button type="primary"
                   @click="cancel()"><i class="el-icon-s-release"></i>取消</el-button>
      </div>
    </div>
    <hr>
    <!-- 基本信息栏 -->
    <div>
      <!-- 第二行 -->
      <div>
        <span class="infoborder">基本信息</span>
      </div>
      <!-- 选填信息 -->
      <div style="margin-top:20px">
        <el-form :inline="true"
                 label-width="80px"
                 :model="formLabelAlign">
          <el-row>
            <el-col :span="7"
                    >
              <el-form-item label="品类">
                <el-select v-model="formdata.goodstype"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.goodstype"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7"
                    style="margin-left:70px">
              <el-form-item label="制单人">
                <el-input v-model="formdata.documentmaker"
                          :disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="制单时间">
                <el-input v-model="makingtime"
                          :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="7"
                    style="margin-left:1px">
              <el-form-item label="单号">
                <el-input v-model="formdata.ordernum"
                          :disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="7"
                    
                    style="margin-left:55px">
              <el-form-item label="客户">
                <el-select v-model="formdata.client "
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.client"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7"
                  
                    style="margin-left:0px">
              <el-form-item label="成色">
                <el-select v-model="formdata.purity"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.purity"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="7"
                    >
              <el-form-item label="仓库">
                <el-select v-model="formdata.warehouse"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.warehouse"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7"
                    
                    style="margin-left:55px">
              <el-form-item label="状态">
                <el-select v-model="formstatus"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.status"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7"
                    
                    style="margin-left:0px">
              <el-form-item label="部门">
                <el-select v-model="formdata.department"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.department"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>

        </el-form>
      </div>
    </div>
    <!-- 产品信息栏 -->
    <div>
      <div>
        <div style="height:40px">
          <span class="infoborder">产品信息</span>
          <el-button type="primary"
                     style="float:right"
                     @click="table = true;find()">
            <i class="el-icon-circle-plus-outline" />添加
          </el-button>
        </div>
        <!-- 弹出框内容 -->

        <el-drawer title="选择客户的商品"
                   :visible.sync="table"
                   direction="ttb"
                   size="50%"
                   fullscreen="true">
          <el-table ref="multipleTable"
                    :data="gridData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection"
                             width="55">
            </el-table-column>
            <el-table-column label="序号"
                             width="120"
                             prop="id">
            </el-table-column>
            <el-table-column prop="goodsname"
                             label="产品名称"
                             width="300">
            </el-table-column>
            <el-table-column prop="client"
                             label="客户">
            </el-table-column>
            <el-table-column prop="purity"
                             label="成色"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="weight"
                             label="重量"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="amount"
                             label="数量"
                             show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px;margin-left:800px">
            <el-button @click="insert()">确定</el-button>
            <el-button @click="table = false">取消</el-button>
          </div>
        </el-drawer>
      </div>
      <el-table :data="selectorderlist"
                style="width: 100%">
        <el-table-column prop="id"
                         type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <el-table-column prop="goodsinfo"
                         label="产品信息">
        </el-table-column>
        <el-table-column prop="goodsname"
                         label="产品名称">
        </el-table-column>
        <el-table-column prop="barecode"
                         label="条码">
        </el-table-column>
        <el-table-column prop="client"
                         label="客户">
        </el-table-column>
        <el-table-column prop="area"
                         label="区域">
        </el-table-column>
        <el-table-column prop="purity"
                         label="成色">
        </el-table-column>
        <el-table-column prop="weight"
                         label="重量">
        </el-table-column>
        <el-table-column prop="amount"
                         label="数量">
        </el-table-column>
        <el-table-column prop="gforFee"
                         label="克工费">
        </el-table-column>
        <el-table-column label="操作">
                   <template slot-scope="scope">
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle
                       @click.native.prevent="deleteRow(scope.$index, selectorderlist)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="1"
                     :page-sizes="[10, 20, 30]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="count">
      </el-pagination>
    </div>
    <!-- <button @click="test">测试</button> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      //选货单状态
      formstatus: '',

      //制单时间
      makingtime: this.getTime(),

      count: 0,
      //将基础信息和产品信息同时传过去
      selectgoodsinfo: {
        basicinfo: {},
        goodsinfo: {},
      },

      // 基础信息
      formdata: {
        goodstype: '',
        client: '',
        purity: '',
        warehouse: '',
        status: '',
        department: '',
        ordernum: this.createOrder(),
        documentmaker: '',
      },
      //选择下拉框
      formLabelAlign: {
        name: '',
        region: '',
        type: 'aaa',
        goodstype: [
          {
            label: '黄金',
          },
          {
            label: '钻石',
          },
          {
            label: '玛瑙',
          },
          {
            label: '翡翠',
          },
        ],
        client: [
          {
            label: '老王',
          },
          {
            label: '小王',
          },
          {
            label: '泰森',
          },
          {
            label: '杰克',
          },
        ],
        purity: [
          {
            label: '999千金',
          },
          {
            label: '9999万金',
          },
        ],
        warehouse: [
          {
            label: 'A仓库',
          },
          {
            label: 'B仓库',
          },
        ],
        status: [
          {
            label: '草稿',
          },
          {
            label: '已完成',
          },
        ],
        department: [
          {
            label: '销售部A',
          },
          {
            label: '销售部B',
          },
        ],
      },
      //产品栏展示的内容
      selectorderlist: [],
      // 添加商品信息
      table: false,
      loading: false,
      //弹出框展示的内容
      gridData: [],
      //已勾选的产品内容
      multipleSelection: [],
    }
  },
  methods: {
    test() {
      // console.log(this.$data.formstatus)
      // console.log(this.$data.formdata.status)
      console.log(this.formdata.status)
    },

        //删除产品信息当前行
    deleteRow(index, rows) {
      rows.splice(index, 1)
      var selectorderlist = this.selectorderlist
            this.count = this.selectorderlist.length
    },


    //取消按钮返回搜索页面
    cancel() {
      this.$router.push({ path: 'selectgoodslist' })
    },

    //查询点击添加按钮之后的信息
    find() {
      this.axios({
        method: 'get',
        url: this.baseUrl + 'sales/getgoodsinfo',
        params: {
          client: this.formdata.client,
        },
      }).then((res) => {
        // console.log(res.data.data);
        this.gridData = res.data.data
      })
    },

    //将复选的产品放入产品信息栏
    insert() {
      console.log(this.$data.selectorderlist)
      for(var i in this.multipleSelection){
        this.selectorderlist.push(this.multipleSelection[i])
      }
      console.log(this.selectorderlist);
      this.count = this.selectorderlist.length
      this.$data.table = false
      this.$message.success("添加成功")

    },
    //查询点击添加按钮之后的信息
    find() {
      console.log(this.$data.formdata)
      this.axios({
        method: 'get',
        url: this.baseUrl + 'sales/getgoodsinfo',
        params: {
          client: this.formdata.client,
        },
      }).then((res) => {
        // console.log(res.data.data);
        this.gridData = res.data.data
      })
    },
    //提交
    commit() {
      this.$confirm('此操作将提交本页信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '提交成功!',
          })
          var status = this.formstatus
          console.log(status)
          if (status == '草稿') {
            this.formdata.status = 0
          } else {
            this.formdata.status = 1
          }

          //提交选货单
          this.axios({
            method: 'post',
            url: this.baseUrl + 'sales/addselectorder',
            data: {
              // selectgoodsinfo:this.selectgoodsinfo
              SelectgoodsBasicinfo: this.formdata,
              selectorderlist: this.selectorderlist,
              // goodsinfo:this.selectorderlist
            },
          }).then((res) => {})
          //跳转到选货单列表页
          this.$router.push({ path: 'selectgoodslist' })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交',
          })
        })
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 全选功能方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //获取当前制表时间
    getTime() {
      var date1 = new Date()
      var year = date1.getFullYear()
      var month = date1.getMonth() + 1
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      var day = date1.getDate()
      if (day >= 1 && day <= 9) {
        day = '0' + day
      }
      var hours = date1.getHours()
      if (hours >= 1 && hours <= 9) {
        hours = '0' + hours
      }
      var minutes = date1.getMinutes()
      if (minutes >= 1 && minutes <= 9) {
        minutes = '0' + minutes
      }
      var seconds = date1.getSeconds()
      if (seconds >= 1 && seconds <= 9) {
        seconds = '0' + seconds
      }
      return (
        year +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hours +
        ':' +
        minutes +
        ':' +
        seconds
      )
    },

    //生成订单号
    createOrder() {
      var date = new Date()
      var ordernum = 'XH' + date.getTime()
      console.log(date)
      return ordernum
    },
  },
  created() {
    var ordernum = this.$route.query.ordernum
    console.log(ordernum)
    if (ordernum != null) {
      this.axios({
        method: 'get',
        url: this.baseUrl + 'sales/getdetailbyno',
        params: {
          no: ordernum,
        },
      }).then((res) => {
        console.log(res.data.data)
        this.formdata = res.data.data
        this.count = res.data.data.selectgoodsGoodsinfos.length
        console.log(res.data.data.status)
        if (res.data.data.status == 0) {
          this.formstatus = '草稿'
        } else {
          this.formstatus = '已完成'
        }
        this.selectorderlist = res.data.data.selectgoodsGoodsinfos
      })
    } else {
      // alert(this.$store.state.grades.account);
      this.formdata.documentmaker = this.$store.state.grades.account
    }
  },
}
</script>

<style scoped>
.submitandcancel {
  float: right;
  margin-top: 10px;
}
.allinfo {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.infoborder {
  border-style: solid;
  padding-left: 10px;
  margin-left: 10px;
  border-color: white white white skyblue;
}
.firstline {
  height: 50px;
}
</style>
